<template>
  <router-view v-slot="{ Component }">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="store.state.cacheView.cacheViewList">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useStore } from '@/store/index'
import { onMounted } from 'vue'

console.log('import.meta.env: ', import.meta.env)

const router = useRouter()

const store = useStore()

const cacheComponents = router
  .getRoutes()
  .filter(item => item.meta?.keepAlive && item.name)
  .map(item => item.name)

onMounted(() => {
  store.commit('cacheView/SET_CACHE_VIEWS', cacheComponents)
  store.dispatch('dict/setDictList')
})
</script>

<style lang="scss">
@import '@/styles/reset.css';
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
